<template>
  <view>
    <view v-if="!showLogin">
      <view class="productImage" v-if="form.productImgUrl">
        <leave_note_mini />
        <uv-scroll-list>
          <view class="scroll_box cflex flex_y_center flex_x_center" v-for="(item,index) in form.productImgUrl.split(',')" :key="index">
            <image :src="item" mode="aspectFit" style="height: 240px;"></image>
          </view>
        </uv-scroll-list>
      </view>
      <view class="flex_h_80 cflex flex_p_lr" style="height: 80px">
        <view class="flex_1 rflex flex_y_center" style="font-weight: bolder">{{form.productName}}</view>
        <view class="flex_1 rflex flex_y_center">
          <view class="flex_1 rflex miniTxt flex_y_center" v-if="form.productTags">
            <uv-button :type="index % 2 === 0 ? 'primary' : 'warning' " size="mini" plain v-for="(item,index) in form?.productTags?.split(',')" :key="item">{{item}}</uv-button>
          </view>
          <view class="flex_1 flex_y_center rflex flex_x_end" style="color: #192F5E">咨询量：{{form.consultCount}}</view>
        </view>
      </view>
      <view class="flex_p_lr">
        <uv-parse :content="form.productContent" />
      </view>
      <view class="flex_h_10"></view>
      <view class="flex_h_45 flex_p_lr rflex flex_y_center">
        <view class="title-txt">相关文档</view>
      </view>
      <view class="flex_h_10"></view>
      <view class="file-box rflex flex_p_lr flex_y_center" v-for="item in form?.productFileList" :key="item.id" @click="toLook(item)">
        <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/3bc8efa4d614ac4ed5d0c86ee7e8b369f6329f51c2a53216f95052dda43daa99.png" style="width: 45px;height: 45px" v-if="item?.fileSuffix === '.docx' || item?.fileSuffix === '.doc'"></image>
        <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/8745869e2e3df0c5f6cad1ba65144ea1a7bad9ad6aaca92b177a5118c5c9b091.png" style="width: 45px;height: 45px" v-else-if="item?.fileSuffix === '.xlsx' || item?.fileSuffix === '.xls'"></image>
        <image src="https://public-yz.oss-cn-nanjing.aliyuncs.com/2025/07/05/41c67d73661a44eba267089374ff2530.png" style="width: 45px;height: 45px" v-else></image>
        <div class="flex_w_10"></div>
        <view class="flex_1 cflex file-item">
          <view class="flex_1 rflex flex_y_center file-name">{{item.originalName}}</view>
          <view class="flex_1 rflex flex_y_center file-time">{{item.createTime}}</view>
        </view>
      </view>
      <view class="flex_h_100"></view>
      <view class="rflex flex_y_center" style="width: 100%;height: 40px;position: fixed;bottom: 30px" v-if="permissionType != 2">
        <!--<view class="flex_1 flex_p_lr">
          <uv-button type="primary" color="#C7D5EF" open-type="share" shape="circle" plain>分享</uv-button>
        </view>-->
        <view class="flex_2 flex_p_lr">
          <uv-button color="#2D4C98" shape="circle" @click="handleToInquiry">我要咨询</uv-button>
        </view>
      </view>
    </view>
    <view v-if="showLogin">
      <inner-login />
    </view>
  </view>
</template>

<script>
import InnerLogin from "@/components/innerLogin.vue";
import ProductApi from "@/api/product";
import Leave_note_mini from "@/components/leave_note_mini.vue";
import UserInfoApi from "@/api/system/userInfo";
import {getUserInfoId} from "@/utils/auth";

export default {
  components: {Leave_note_mini, InnerLogin},
  data() {
    return {
      showLogin: false,
      userId: null,
      permissionType: null,
      form: {},
      imgArr: [],
      searchId: null,
      fileList: [{
        id: 1,
        name: '11222.doc',
        size: '112M',
        time: '2025-03-27 22:10'
      }, {
        id: 2,
        name: '11222.xlsx',
        size: '112M',
        time: '2025-03-27 22:10'
      }]
    };
  },
  onShareAppMessage() {
    return {
      title: this.form.productName,
      path: '/page_product/product_detail?detailId=' + this.searchId,
    };
  },
  onLoad(options) {
    this.searchId = options.detailId;
    this.userId = getUserInfoId();
    if (this.userId) {
      this.getUserPermission();
    }
    this.getProductDetail();
  },
  onShow() {
    this.showLogin = false;
  },
  methods: {
    async getUserPermission() {
      const res = await UserInfoApi.getUserPermission();
      this.permissionType = res?.data;
    },
    async getProductDetail() {
      const res = await ProductApi.getProductDetail(this.searchId);
      this.form = res?.data;
      if (res?.data?.productImgUrl) {
        this.imgArr = res?.data?.productImgUrl?.split(',');
        console.log(this.imgArr);
      }
    },
    toLook(item) {
      uni.downloadFile( {
        url: item.url,
        success: function (res) {
          console.log(res.tempFilePath);
          uni.openDocument({
            filePath: res.tempFilePath,
            success: function (res) {
              console.log('打开文档成功')
            }
          })
        }
      })
      // uni.setClipboardData({
      //   data: item.url,
      //   success: function () {
      //     uni.showToast({
      //       title: '链接已复制到粘贴板，请在浏览器中打开！',
      //       icon: 'none',
      //       duration: 2000
      //     });
      //   },
      // });
    },
    handleToInquiry() {
      if (this.userId) {
        uni.navigateTo({
          url: '/page_consultation/index?productId=' + this.form.id
        });
      }else {
       this.showLogin = true;
      }
    },
  }
}
</script>

<style scoped lang="scss">
.miniTxt{
  ::v-deep .uv-button-wrapper{
    margin-right: 5px;
  }
}
.detail_pro{
  width: 100%;
  height: 240px;
  image{
    width: 90%;
    height: 100%;
  }
}
.detail_buy{
  width: 100%;
  height: 180px;
  image{
    width: 90%;
    height: 100%;
  }
}
.pro_pro_img{
  width: 100%;
  height: 450px;
  image{
    width: 90%;
    height: 100%;
  }
}

.title-txt{
  font-size: 32rpx;
  font-weight: bolder;
}
.file-box{
  height: 65px;
  border-bottom: 1px solid #eee;
  .file-item{
    height: 45px;
    font-size: 24rpx;
    color: #777777;
    .file-name{
      color: #232323;
    }
  }
}
.scroll_box {
  width: 98vw;
}
</style>
